<template>
  <div class="goodsinfo-box">
    <Title title="商品信息" style="margin-bottom:18px;"/>
    <div class="table-list">
      <u-table
        v-if="data.length > 0"
        ref="allOrderTableRef"
        :data="handleData(data)"
        :row-height="49"
        :border="false"
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row>
        <u-table-column align="left" label="SKU编码" min-width="150" prop="goodsCoding">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.goodsCoding" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="数量" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.quantity" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="仓库" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.warehouse" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="标题" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.title" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="商品属性" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.attribute" />
          </template>
        </u-table-column>
        <u-table-column align="right" label="总成本(元)" min-width="110">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.totalCost" :price="scope.row.totalCost / 100" />
          </template>
        </u-table-column>
        <!-- <u-table-column align="left" label="价格" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.price" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="成本价" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.costPrice" />
          </template>
        </u-table-column> -->
      </u-table>
      <div v-else class="empty-container">
        <div class="empty-box">
          <img :src="emptyInvoice" alt="empty">
          <div class="empty-text">暂无数据</div>
        </div>
      </div>
      <el-row type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="data.length > 10"
          :current-page="currentPage"
          :page-size="perPage"
          :total="data.length"
          :page-sizes="[10, 20, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyInvoice from '@/assets/empty-invoice.png';

export default {
  components: { Title, EmptyPlaceholder },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      emptyInvoice,
      currentPage: 1,
      perPage: 10
    };
  },
  methods: {
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleData(data) {
      return data.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsinfo-box{
  margin-top: 20px;
}
.empty-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EBEEFD;
  padding: 12px 0 18px 0;
  .empty-box {
    display: flex;
    align-items: center;
  }
  img {
    width: 12px;
    margin-right: 4px;
  }
  .empty-text {
    color: #999;
    font-size: 14px;
    margin: 0 auto;
  }
}
</style>
